<script setup>

    // 这个组件接收三个参数
    // 1. len 总共有多少个数据
    // 2. count  每页需要展示多少个数据
    // 3. getIndex 自定义事件：获取当前的index，从0开始 
    import { ref, watch } from 'vue';
    const props = defineProps(['len', 'count']);
    const emits = defineEmits(['getIndex'])

    class Paging {
        constructor(len, count) {
            this.len = len;
            this.count = count;
            this.max = 0;
            this.list = [];
            this.firstOrLast = [
                {title: 1, active: 'active'},
                {title: this.max, active: ''}
            ]
            // 从0开始
            this.currentIndex = 1;
            this.currentList = [];
            this.previousOrNext = {
                previous: 'disable',
                next: ''
            } 

            this.init();
        }
        init() {
            this.computedMax();
            this.createList();
            this.createCurrentList(0)
            this.getData(1);
        }
        computedMax() {
            this.max = Math.ceil(this.len / 30)
            this.firstOrLast[1].title = this.max;
        }
        createList() {
            for(let i = 1; i <= this.max; i ++) {
                this.list.push({
                    title: i,
                    active: ''
                })
            }
        }
        createCurrentList(index) {
            let start = 0;
            let end = 0;
            if(index > 5) {     
                if(index > (this.max - 4)) {
                    start = this.max - 8; 
                    end = this.max;
                } else {
                    start = index - 4;
                    end = index + 3;
                }
            } else {
                start = 0;
                end = 8;
            }
            this.currentList = this.list.slice(start, end)
        }
        clearCurrentListStyle() {
            this.currentList.forEach(value => {
                value.active = '';
            }) 
        }

        style(index, i) {
            if(index === 1) {
                this.clearCurrentListStyle();
                this.firstOrLast[1].active = '';
                this.firstOrLast[0].active = 'active';
                this.previousOrNext.next = '';
                this.previousOrNext.previous = 'disable';
            } else if(index === this.max) {
                this.clearCurrentListStyle();
                this.firstOrLast[0].active = '';
                this.previousOrNext.previous = '';
                this.firstOrLast[1].active = 'active';
                this.previousOrNext.next = 'disable';
            } else {
                this.clearCurrentListStyle();
                this.firstOrLast[0].active = '';
                this.firstOrLast[1].active = '';
                this.previousOrNext.next = '';
                this.previousOrNext.previous = '';
                this.currentList[i].active = 'active';
            }
        }

        updateIndex(index, i) {
            this.currentIndex = index;
            this.style(index, i);
            this.createCurrentList(index);
            this.getData(index);
            document.documentElement.scrollTop = 500;
        }

        getData(index) {
            emits('getIndex', index)
        }

        previous() {
            if(this.currentIndex <= 1)  return
            let sum = this.currentIndex - 1;
            let index = this.computedIndex(sum);
            this.updateIndex(sum, index);
        }

        next() {
            if(this.currentIndex > this.max-1)  return
            let sum = this.currentIndex + 1;
            let index = this.computedIndex(sum);
            this.updateIndex(sum, index);

        }
        computedIndex(value) {
            let i = 0;
            this.currentList.forEach((item, index) => {
                if(item.title === value) {
                    i = index;
                }
            })
            return i;
        }

    }
    let paging = ref();
    watch(props, (newValue) => {
        if(newValue.len) {
            paging.value = new Paging(props.len, props.count);
        }
    })



</script>

<template>
    <ul class="paging" v-show="paging">
        <li :class="paging?.previousOrNext.previous" @click="paging.previous">上一页</li>
        <li @click="paging.updateIndex(1)" :class="paging?.firstOrLast[0].active">{{paging?.firstOrLast[0].title}}</li>
        <li v-show="paging?.currentIndex > 5">...</li>
        <li 
            v-for="(item, index) of paging?.currentList"
            v-show="!(item?.title === 1) && !(item?.title === paging?.max)"
            :class="item.active"
            @click="paging.updateIndex(item?.title, index)"
        >
            {{item.title}}
        </li>
        <li v-show="paging?.currentIndex < (paging?.max - 4)">...</li>
        <li @click="paging.updateIndex(paging?.max)" :class="paging?.firstOrLast[1].active">{{paging?.firstOrLast[1].title}}</li>
        <li :class="paging?.previousOrNext.next" @click="paging.next">下一页</li>
    </ul>
</template>

<style lang='less' scoped>
    .paging{
        display: flex;
        justify-content: center;
        margin: 70px 0px 20px 0px;
        li{
            height: 20px;
            line-height: 20px;
            text-align: center;
            padding: 0px 5px;
            border: 1px solid #ccc;
            margin: 0 5px;
            font-size: 10px;
            user-select: none;
            cursor: pointer;
            border-radius: 2px;
            color: #777;
            &:first-child,
            &:last-child{
                background: linear-gradient(to bottom, white, #eee);
                padding: 1px 10px;
            }
        }
        .active{
            background-color: #c20c0c;
            color: white;
            border-radius: 2px;
        }
        .disable{
            color: #ddd;
            cursor: default;
        }
    }
</style>